<template>
  <footer class="footer">
    <div v-for="item in list" :key="item.path" @click="changeActive(item)" class="wrap">
      <div class="foot-btn1" v-if="route.path!==item.path">
        <img :src="item.nomorePic">
        <p>{{item.title}}</p>
      </div>
      <div class="foot-btn2" v-else>
        <img :src="item.activePic">
        <p>{{item.title}}</p>
      </div>
    </div>
  </footer>
</template>

<script>
import { reactive } from "vue";
import { useRoute,useRouter } from "vue-router"

export default {
  setup() {
    // 路由
    const route = useRoute();
    const router = useRouter();
    //列表渲染
    const list = reactive([
      {
        nomorePic: require("../../assets/images/img/shouye02.png"),
        activePic: require("../../assets/images/img/shouye01.png"),
        title: "首页",
        path: "/home/head",
      },
      {
        nomorePic: require("../../assets/images/img/liao02.png"),
        activePic: require("../../assets/images/img/liao01.png"),
        title: "聊",
        path: "/home/talk",
      },
      {
        nomorePic: require("../../assets/images/img/dingzhi02.png"),
        activePic: require("../../assets/images/img/dingzhi01.png"),
        title: "定制",
        path: "/home/dingzhi",
      },
      {
        nomorePic: require("../../assets/images/img/mine02.png"),
        activePic: require("../../assets/images/img/mine01.png"),
        title: "我的",
        path: "/home/mine",
      }
    ]);
    // 点击跳转
    const changeActive = (item) => {
      router.push(item.path);
    }

    return {
      list,
      changeActive,
      route,
      router,
    };
  },
};
</script>

<style lang="less" scoped>
@import "../../assets/css/var.less";
.footer {
  width: 100%;
  height: 62px;
  border-top: 1px solid #ddd;
  background: #fff;
  position: fixed;
  bottom: 0;
  left: 0;
  z-index: 999;
  display: flex;

  .wrap {
    width: 25%;
    .foot-btn1,.foot-btn2 {
      width: 100%;
      height:100%;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      /deep/img {
        width: 26px;
        height: 26px;
      }
      p {
        font-size: @SS-font;
        margin-top: 5px;
      }
    }
    .foot-btn1 p {
      color: #8c8c8c;
    }
    .foot-btn2 p {
       color: #000;
    }
  }

}

</style>